<template>
  <div id="material-consumption">
    <h4 class="material-consumption-title">在建项目物资消耗情况</h4>
    <div class="material-consumption-statistic">
      <div class="material-consumption-statistic-item">
        <h6 class="item-title">
          需求总金额 （万元）
        </h6>
        <h4 class="item-value">2,014</h4>
      </div>
      <div class="material-consumption-statistic-item">
        <h6 class="item-title">
          出库金额 （万元）
        </h6>
        <h4 class="item-value">2,014</h4>
      </div>
      <div class="material-consumption-statistic-item">
        <h6 class="item-title">
          库存金额 （万元）
        </h6>
        <h4 class="item-value">2,014</h4>
      </div>
    </div>
    <div id="myCharts" ref="materialConsumptionEcharts" class="material-consumption-echarts">

    </div>
  </div>
</template>

<script>
export default {
  name: "MaterialConsumptionEchart",
  computed: {
    echartsOptions() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          type: 'plain',
          bottom: 0,
          height: 10,
          icon: 'circle',
          textStyle: {
            color: '#b5b5b5'
          }
        },
        grid: {
          left: '15%'
          // containLabel: true
        },
        xAxis: {
          type: 'value',
          name: '单位 (万元)',
          nameGap: 0,
          nameTextStyle: {
            color: '#8c8c8c',
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#8c8c8c',
            }
          },
          axisLabel: {
            margin: 15,
            color: '#333333',
            fontSize: 16
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['航道疏浚', '公路保养', '道路基建', '铁路维护', '舰船修造'],
          axisLine: {
            lineStyle: {
              opacity: 0,
            }
          },
          axisLabel: {
            margin: 4,
            color: '#333333',
            fontSize: 16
          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            name: '库存金额',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#9ed0ff'
            },
            data: [1700, 900, 950, 1500, 400]
          },
          {
            name: '出库金额',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#6db9ff'
            },
            data: [600, 500, 400, 300, 400]
          },
          {
            name: '计划金额',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#177ddc'
            },
            data: [250, 400, 1000, 700, 1000]
          }
        ]
      }
    }
  },
  methods: {
    initCharts() {
      const chartsDom = document.getElementById("myCharts");
      const myChart = this.$echarts.init(chartsDom);
      myChart.setOption(this.echartsOptions);
    }
  },
  mounted() {
    this.initCharts()
  }

}
</script>

<style lang="less" scoped>
#material-consumption {
  height: 100%;
  .material-consumption-title {
    height: 20px;
    line-height: 1rem;
    font-size: 1rem;
    color: #333333;
  }
  .material-consumption-statistic {
    display: flex;
    flex-direction: row;
    margin-top: 30px;
    height: 50px;
    .material-consumption-statistic-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 27%;
      height: 100%;
      .item-title {
        height: 20px;
        line-height: 20px;
        font-weight: 400;
        font-size: 0.7rem;
        color: #8c8c8c;
      }
      .item-value {
        height: 30px;
        line-height: 30px;
        font-size: 25px;
      }
    }
  }
  .material-consumption-echarts {
    height: 300px;
  }
}
</style>
